<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />

    <title>BTPrint</title>

    <script src="http://mp.berrybit.cn/static/vue.min.js"></script>

    <style>
        .buttonGroup {
            display: flex;
            flex-flow: row nowrap;
            justify-content: space-between;
            padding: .5rem;
        }
        .buttonGroup button {
            width: 100%;
            margin: 1px;
            height: 2rem;
        }
    </style>
</head>

<body>

    <section id="main" style="margin-left: auto; margin-right: auto;">
        <div class="buttonGroup">
            <button @click="setcol($event)">1</button>
            <button @click="setcol($event)">2</button>
            <button @click="setcol($event)">3</button>
            <button @click="setcol($event)">4</button>
            <button @click="setcol($event)">5</button>
            <button @click="setcol($event)">6</button>
            <button @click="setcol($event)">7</button>
            <button @click="setcol($event)">8</button>
        </div>
        <div class="buttonGroup">
            <button @click="setcol($event)">9</button>
            <button @click="setcol($event)">10</button>
            <button @click="setcol($event)">11</button>
            <button @click="setcol($event)">12</button>
            <button @click="setcol($event)">13</button>
            <button @click="setcol($event)">14</button>
            <button @click="setcol($event)">15</button>
            <button @click="setcol($event)">16</button>
        </div>
        <hr>
        <div class="buttonGroup">
            <button @click="setdir(0)">横：左到右</button>
            <button @click="setdir(1)">横：右到左</button>
            <button @click="setdir(2)">竖：左到右</button>
            <button @click="setdir(3)">竖：右到左</button>
        </div>
        <hr>

        <textarea id="Message" v-model="content" style="width: calc(100% - 8px);height: 8rem;"></textarea>

        <hr>
        <div class="buttonGroup" id="buttonGroup0">
            <button class="button" type="button" @click="fontSizeInc">+</button>
            <button class="button" type="button" @click="fontSizeDec">-</button>
        </div>

        <hr>
        <table id="FormUser" style="margin-left: auto; margin-right: auto;">
            <tbody>
                <tr v-for="currentLine in Lines">
                    <td v-for="c in currentLine"><span class="word">{{c}}</span></td>
                </tr>
            </tbody>
        </table>

    </section>

    <script>

        var app = new Vue({
            el: '#main',
            data: {
                content: "一二三四五六七八九十",
                cols: 4,
                currentLine: "",
                Lines: [],
                FontSize: 10,
                dir: 0,
            },

            mounted: function () {
                let mainDiv = document.getElementById("main");
                this.FontSize = mainDiv.offsetWidth / this.cols - this.cols;
                this.updateView();
            },

            watch: {
                content(newQuestion, oldQuestion) {
                    if (newQuestion != oldQuestion) {
                        let mainDiv = document.getElementById("main");
                        this.FontSize = mainDiv.offsetWidth / this.cols - this.cols;
                        this.updateView();
                    }
                }
            },

            methods: {
                setdir: function (dir) {
                    this.dir = dir;
                    this.updateView();
                    this.fontSizeSet();
                },

                setcol: function (event) {
                    this.cols = event.srcElement.innerText;

                    let mainDiv = document.getElementById("main");
                    this.FontSize = mainDiv.offsetWidth / this.cols - 4;
                    this.updateView();
                    this.fontSizeSet();
                },

                updateView: function () {
                    let cols = Number(this.cols);
                    let content = this.content.replace(/\s/g, '') ;
                    while ((content.length % cols) != 0) {
                        content += " "
                    }

                    let LineCount = content.length / cols;
                    LineCount = Number((LineCount - 0.5).toFixed());

                    let arr = new Array(LineCount).fill('').map(arr => new Array(cols).fill(''));

                    // <button @click="setdir(0)">横排，从左到右</button>
                    if (this.dir == 0) {
                        for (let i = 0; i < content.length; i++) {
                            let x = Math.floor(i/cols);
                            let y = i % cols;
                            arr[x][y] = content[i];
                        }
                    }

                    // <button @click="setdir(1)">横排，从右到左</button>
                    if (this.dir == 1) {
                        for (let i = 0; i < content.length; i++) {
                            let x = Math.floor(i/cols);
                            let y = i % cols;
                            y = cols - 1 - y
                            arr[x][y] = content[i];
                        }
                    }

                    // <button @click="setdir(2)">竖排，从左到右</button>
                    if (this.dir == 2) {
                        for (let i = 0; i < content.length; i++) {
                            let y = Math.floor(i/LineCount);
                            let x = i % LineCount;
                            arr[x][y] = content[i];
                        }
                    }

                    // <button @click="setdir(3)">竖排，从右到左</button>
                    if (this.dir == 3) {
                        for (let i = 0; i < content.length; i++) {
                            let x = i % LineCount;
                            let y = Math.floor(i/LineCount);
                            y = cols - 1 - y
                            arr[x][y] = content[i];
                        }
                    }




                    this.Lines = [];
                    for (let x = 0; x < LineCount; x++) {
                        let line = ""
                        for (let y = 0; y < cols; y++) {
                            line += arr[x][y]
                        }
                        this.Lines.push(line);
                    }

                    /*
                    this.Lines = [];
                    this.currentLine = "";
                    for (let i = 0; i < content.length; i++) {
                        this.currentLine += content[i];
                        if (this.currentLine.length >= this.cols) {
                            this.Lines.push(this.currentLine);
                            this.currentLine = "";
                        }
                    }
                    if (this.currentLine.length >= 0) {
                        this.Lines.push(this.currentLine);
                    }
                    */

                    this.fontSizeSet();
                },

                fontSizeSet: function () {
                    Vue.nextTick(function () {
                        let objs = document.getElementsByClassName("word");
                        for (let i = 0; i < objs.length; i++) {
                            objs[i].style.fontSize = "" + app.FontSize + "px";
                        }
                    })
                },

                fontSizeInc: function () {
                    this.FontSize += 2;
                    this.fontSizeSet();
                },

                fontSizeDec: function () {
                    this.FontSize -= 2;
                    this.fontSizeSet();
                },
            },
        });
    </script>
</body>

</html>
